Back to Contents

Clip Background

Preview options in Freeway

You have a variety of options when it comes to previewing the content of your pages when you're working in Freeway. These are located under the View menu, for the most part. An important exception to this is the Preview command itself, which is located under the File menu. The Preview command does not show you what is going to happen in Freeway itself, ironically enough, but in fact publishes the whole site as HTML (in other words, generates the finished article in full) and allows you to view it in the Browser. The effect is just as if you had built the whole site using the Publish command, and then switched into the browser to see view the current page.

While you're working in Freeway, you are already working in a kind of preview or "WYSIWYG" mode - Freeway does its best to show you what you will see in the browser itself, assuming default browser settings.

If you wish, you may change the preferences that Freeway uses to display default fonts, using the File/Preferences/Views options. This way you can approximate what a visitor will see if they have their default fonts set to different alternatives in the browser preferences.

However, there are several other options that Freeway provides you to give more detailed information on what will happen in the output. These are divided into two broad categories, graphics and layout.

View menu options for Graphics

The two commands concerned with giving you a better idea of what will happen to exported graphics on your page are the Anti-Aliasing and Graphics Preview commands. View Anti-Aliasing is used to get a rough idea of what will happen when Freeway converts text into GIF graphics, whereas Graphics Preview gives you an exact and precise preview of the resulting graphics.

Anti-Alias

When you export text, or colored, filled boxes as GIF, there is a likelihood that any curved or diagonal edges will appear extremely jagged on the screen, owing to the low resolution of the pixel grid used to display computer video. This jaggedness is called Aliasing, and leads to extremely unprofessional looking graphics.

Professional image editing software is used to create bitmapped graphics that do not display this jaggedness, using a procedure called Anti-Aliasing. This method smooths jagged edges by blending the colors of the pixels along the edge.

Graphics created by Freeway will be automatically Anti-Aliased by default, although you may turn it off if you wish for text, but because the difference is often dramatic, and you would only discover this when you published the site and viewed the exported graphics in a browser, Freeway offers you the chance to preview what the Anti-Aliasing will be like without exporting the graphics by turning in the Anti-Alias command.

This shows any text or objects which will be exported with Anti-Aliased edges with their edges softened artificially, and is well worth using frequently to see a more accurate view of your page while you're creating it. It uses a bit more memory than normal to display the page, and slows performance slightly, though not normally noticeably. However, this convenience comes from the fact that the actual graphics are not being created for real, and this Anti-Alias preview does not accurately reflect the colors that will be used on the edges, and so is not completely accurate in its detail.

Graphics Preview

When you import any graphic (with the exception of images imported for Pass-through) Freeway uses the original as a basis for a completely new exported version. In the process, Freeway offers you precise options which can be used to adjust for example, the compression, interlacing, color palette or number of colors in the resulting exported graphic. However, these options may have a pronounced effect on either the final file size, the appearance of the resulting image, or both, and it's useful to have feedback on these two factors when adjusting the options provided.

The Graphics Preview command is used when adjusting images using the Export panel graphics controls, to preview in real-time the effect of your changes. When you turn on Graphics Preview, all the graphics in the page are exported as final image files, and then automatically reimported and displayed for you in position on the page.

It can take a few seconds, during which time a checkerboard pattern is displayed where the graphic sits on the page, and scrolling diagonal lines in the progress box at the lower left corner of the document window indicate that Freeway is processing information.

Once each graphic has been built, it is displayed. Using the Export panel of the Inspector palette, you may then adjust the image controls. When you change an option, the progress box will display its scrolling lines, then the updated version will be displayed. Significant changes, such as changing from GIF to JPEG, or panning the graphic within its box, will revert to the checkerboard pattern again.

Once the graphic is displayed, the size option in the Export panel reports its exact size in bytes.

At any point while the Graphics Preview is calculating, it can be interrupted, for example to turn it off again, or to move elements, or to carry out any other action. However, once it has been interrupted, it needs to begin the processing again from the beginning if you allow it to continue.

Preview Graphics requires some quite intensive processing, and can use a fair amount of memory. It can also slow down working in Freeway unacceptably, especially on a slower machine, so it's recommended that you only turn it on when you explicitly need to work with the graphics Export options, and turn it off again when you're finished.

View menu options for Layout

Freeway offers you as exact a picture as possible of how your finished pages will appear in the browser, but some issues aren't reflected in the normal page layout view. There are two issues to be aware of, one regarding overlapping HTML text boxes with graphic items, and the other regarding the margins that browsers insert at the edge of the window, and the resulting offset of background images compared with the page contents. The two commands that relate to these are HTML Layout and Clip Background respectively.

HTML Layout

When you overlay an HTML box on top of a graphic item, the HTML box is shown to cut through the graphic item beneath, revealing the page background color or image if any. This is how the output will appear in the Web browser. To reproduce this, the underlying image is cut up, and exported as several sections, kept aligned together using HTML commands.

However, the HTML box is exported containing text, even when apparently empty (this is to overcome a browser problem). When the page is viewed, the text size used in the browser may be considerably larger than that assumed when you are constructing the page.

The HTML text will expand in both directions to fill the available space defined for it, depending upon the size you drew the HTML box. If the text becomes too large, the area the HTML box occupies in the browser will expand. This can cause problems in some circumstances, when the HTML box will cause the cut segments of an "underlying" image to become split up as it expands.

Turning on the HTML Layout option while you have Item Frame turned on can help avoid this problem - Freeway displays the cuts made to images (if any) as grey lines, and where an HTML box may potentially cause problems, the danger areas are picked out by red direction arrows. These indicate the areas where your design may break if the text size used in the browser is too great.

Here it is worth noting that on the Windows platform, font size can be set even larger than it can on the Macintosh, so you may find designs will break on Windows PC's even though they seemed robust at the largest point size for text in a Macintosh Web browser.

Clip Background

When working in Freeway, only objects completely on the page will export, and the positioning of objects on the page starts from the top left corner of the page. When the page is viewed in the browser, the top left of the page (and in fact the entire page content) is moved down and to the right inside the browser window, leaving a margin at the left and top of several pixels width. However, page background images are not indented by this amount - they begin at the top left corner of the browser window. Freeway takes account of this when it displays page background images - they are actually cropped slightly when they are displayed, as if the background image actually begins slightly outside the top left corner of the page.

This does not normally cause any problems, and you may not even have noticed it. The situation where trouble can arise is when you have a background image on the page and you have objects on the page which need to be centered or carefully aligned relative to it. Centering within the page may look wrong when viewed in the browser, because of the extra margin the browser adds.

You can preview this margin by turning off the Clip Background command in the View menu. Freeway then displays the browser margin area as well, allowing you to judge positioning of page elements relative to a background image more accurately.

In the output, Freeway uses special commands to try to ensure that the offset displayed is consistent between as many browsers as possible.

Back to the top
Introduction | Getting Started | User Guide | Contacting SoftPress